
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
		<script src="../js/jquery-3.2.1.min.js"></script>
		<style type="text/css">
			.rp {
				width: 100%;
				height: 100%;
				display: none;
				text-align: center;
				position: fixed;
				top: 0;
				background: rgba(0, 0, 0, 0.8);
				z-index: 9999;
				overflow: hidden;
			}
			
			.aname {
				font-size: 16px;
			}
			
			.ainf {
				font-size: 12px;
			}
			
			.rtime {
				font-size: 22px;
				color: #FF0000;
			}
			
			.ptime {
				margin-top: 40%;
				font-size: 22px;
				color: #FFFFFF;
			}
			
			.rprogress {
				background: url(../img/arecord.png) no-repeat center center;
				background-size: 32px 32px;
			}
			
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 36px;
				height: 36px;
				margin: 0 auto;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			.progress {
				width: 90%;
				background-color: #666;
				margin: 0 5%;
				border: 1px solid #222;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
			
			.schedule {
				width: 8px;
				height: 8px;
				margin: 1px 0;
				background-color: #FFCC33;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				-webkit-transition: all 1s linear;
				transition: all 1s linear;
			}
			
			.stop {
				width: 72px;
				height: 72px;
				background: url(../img/astop.png) center center;
				background-size: 72px 72px;
				margin: auto;
				-webkit-border-radius: 72px;
				border-radius: 72px;
			}
			
			.stop:active {
				-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
			}
			
			.iplay {
				display: block;
				background: no-repeat right center url();
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}
		</style>
 
		<!--<script src="../js/voice1.js"></script>-->
 
	</head>
 
	<body>
		<div style="height: 200px;widows: 100px;"></div>
		<div id="dcontent">
			<br/>
			<button style="width: 150px;height: 80px;color: red;" οnclick="startRecord()">开始录音</button>        
			<!--<button style="width: 150px;height: 80px;color: red;" οnclick="outLine();">开始录音22</button>-->        
			<button style="width: 150px;height: 80px;color: red;" οnclick="cleanHistory();">清空历史</button>        
			<br/><br/>
			<hr color="blanchedalmond" />
			<div id="v1">
				<!--<audio src="1509952351582.m4a" controls></audio>-->
			</div>
		</div>
		<br />
		<hr color="red" />
		<label>图片上传：</label><input type="file" name="imageName" accept="image/*" id="uploadImage" style="margin-bottom:10px;" οnchange="uploadImage();">
		<!--<input type="button" id="uploadPicButton" value="上传" οnclick="uploadImage()">-->
		<br /><br />
		<div id="div_image">
 
		</div>
		<br />
		<hr color="red" />
		<br />
		<div class="button" οnclick="getImage()">拍照</div>
		<br /><br /><br />
		<div class="button" οnclick="getVideo()">录像</div>
		<br /><br />
		<div class="button" id="login">登入</div>
		<br />
		<div class="button" id="logout">登出</div>
		<br />
		<div class="button" οnclick="uploadownTest()">下载测试</div>
		<!--<label>视频上传：</label><input type="file" name="uploadVideo" accept="video/*" capture="camcorder" id="uploadVideo" style="margin-bottom:10px;" οnchange="uploadVideo();" />-->
		<!--<input type="button" id="uploadPicButton" value="上传" οnclick="uploadImage()">-->
		<br /><br />
		<div id="div_video">
			<!--<video src="../audio/1510553447189.mp4" width="400px" height="550px" controls="controls"/>-->
				<!--<video src="1510553447189.mp4" controls="controls">-->
			<!--video  width="400px" height="550px" controls="controls">
				<source src="http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=test.mp4" >
				不支持video
				</video>-->
				<video src="http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=test2.ogg" controls="controls">
		</div>
		<br />
 
		<div id="play" class="rp">
			<div id="ptime" class="ptime">00:00:00/00:00:00</div><br/>
			<div id="progress" class="progress">
				<div id="schedule" class="schedule"></div>
			</div>
			<br/>
			<div class="stop" οnclick="stopPlay(),outLine('停止播放！')"></div>
		</div>
		<br />
		<div id="record" class="rp">
			<div style="width:100%;height:20%;"></div>
			<div class="rprogress">
				<div class="rschedule"></div>
			</div>
			<br/>
			<div id="rtime" class="rtime">00:00:00</div><br/>
			<div class="stop" οnclick="stopRecord()"></div>
		</div>
		<br />
		<div id="output">
			Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。
		</div>
	</body>
 
	<script>
		var gentry = null,
			hl = null,
			le = null;
		var er = null,
			ep = null;
		var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题
		// H5 plus事件处理
		function plusReady() {
			// 获取音频目录对象
			plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {
				entry.getDirectory('audio', {
					create: true
				}, function(dir) {
					gentry = dir;
					updateHistory();
				}, function(e) {
					outLine('Get directory "audio" failed: ' + e.message);
				});
			}, function(e) {
				outLine('Resolve "_doc/" failed: ' + e.message);
			});
		}
		if(window.plus) {
			plusReady();
		} else {
			document.addEventListener('plusready', plusReady, false);
		}
 
		// DOMContentLoaded事件处理
		document.addEventListener('DOMContentLoaded', function() {
			// 获取DOM元素对象
			hl = document.getElementById('history');
			le = document.getElementById('empty');
			er = document.getElementById('record');
			rt = document.getElementById('rtime');
			ep = document.getElementById('play');
			pt = document.getElementById('ptime');
			pp = document.getElementById('progress')
			ps = document.getElementById('schedule');
			updateHistory();
		}, false);
 
		// 开始录音
		var r = null,
			t = 0,
			ri = null,
			rt = null;
 
		function startRecord() {
			//outSet('开始录音：');
			console.log('开始录音：');
			r = plus.audio.getRecorder();
			if(r == null) {
				console.log('录音对象未获取')
				outLine('录音对象未获取');
				return;
			}
			r.record({
				filename: '_doc/audio/'
				//format: '3gp'
			}, function(p) {
				console.log('录音完成：' + p)
				outLine('录音完成：' + p);
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					//createItem(entry);
					addVoice(p, entry);
				}, function(e) {
					outLine('读取录音文件错误：' + e.message);
				});
 
			}, function(e) {
				outLine('录音失败：' + e.message);
			});
			er.style.display = 'block';
			t = 0;
			ri = setInterval(function() {
				t++;
				rt.innerText = timeToStr(t);
			}, 1000);
		} // 停止录音
		function stopRecord() {
			er.style.display = 'none';
			rt.innerText = '00:00:00';
			clearInterval(ri);
			ri = null;
			r.stop();
			w = null;
			r = null;
			t = 0;
		}
 
		// 清除历史记录
		function cleanHistory() {
			//hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';
			//le = document.getElementById('empty');
			// 删除音频文件
			outLine('清空录音历史记录：');
			gentry.removeRecursively(function() {
				// Success
				console.log('清空录音历史记录，操作成功！');
				outLine('清空录音历史记录，操作成功！');
			}, function(e) {
				console.log('清空录音历史记录，操作失败：' + e.message);
				outLine('清空录音历史记录，操作失败：' + e.message);
			});
		}
 
		// 获取录音历史列表
		function updateHistory() {
			if(bUpdated || !gentry || !document.body) { //兼容可能提前注入导致DOM未解析完更新的问题
				return;
			}
			var reader = gentry.createReader();
			reader.readEntries(function(entries) {
				for(var i in entries) {
					if(entries[i].isFile) {
						createItem(entries[i]);
					}
				}
			}, function(e) {
				outLine('读取录音列表失败：' + e.message);
			});
			bUpdated = true;
		}
 
		function outLine(msg) {
			$('#output').text(msg);
		}
 
		timeToStr = function(ts) {
			if(isNaN(ts)) {
				return "--:--:--";
			}
			var h = parseInt(ts / 3600);
			var m = parseInt((ts % 3600) / 60);
			var s = parseInt(ts % 60);
			return(ultZeroize(h) + ":" + ultZeroize(m) + ":" + ultZeroize(s));
		};
 
		ultZeroize = function(v, l) {
			var z = "";
			l = l || 2;
			v = String(v);
			for(var i = 0; i < l - v.length; i++) {
				z += "0";
			}
			return z + v;
		};
 
		function addVoice(path, entry) {
			console.log("entry = " + entry.name)
			console.log("上传前的文件名：" + entry.name);
			uploadVoice(path);
		}
 
		function uploadVoice(path) {
			console.log("开始上传：")
			var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";
			var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";
			var task = plus.uploader.createUpload(uploadUrl, {
					method: "POST"
				},
				function(t, status) { //上传完成
					if(status == 200) {
						var data = JSON.parse(t.responseText);
						console.log("上传成功,返回文件名为 ：" + data.data);
						outLine("文件上传成功：" + t.responseText);
						var v = $("<audio controls='controls' volume='1.0'/>");
						v.attr("src", downUrl + "?imageName=" + data.data);
						$("#v1").append(v);
						//上传下载成功之后要清除本地的录音文件
						cleanHistory();
						//startPlay(downUrl + "?imageName=" + data.data);
						/*plus.storage.setItem("uploader", t.responseText);
						var w = plus.webview.create("uploader_ret.html", "uploader_ret.html", {
							scrollIndicator: 'none',
							scalable: false
						});*/
						/*w.addEventListener("loaded", function() {
							//wt.close();
							w.show("slide-in-right", 300);
						}, false);*/
					} else {
						outLine("上传失败：" + status);
						//wt.close();
					}
				}
			);
			task.addData("client", "HelloH5+");
			task.addData("uid", getUid());
			/*for(var i = 0; i < files.length; i++) {
				var f = files[i];
				task.addFile(f.path, {
					key: f.name
				});
			}*/
			task.addFile(path, {
				key: "file"
			})
			task.start();
		}
 
		// 产生一个随机数
		function getUid() {
			return Math.floor(Math.random() * 100000000 + 10000000).toString();
		}
 
		// 播放文件相关对象
		var p = null,
			pt = null,
			pp = null,
			ps = null,
			pi = null;
 
		function startPlay(url) {
			//ep.style.display = 'block';
			//var L = pp.clientWidth;
			p = plus.audio.createPlayer(url);
			p.play(function() {
				outLine('播放完成！');
				// 播放完成
				/*pt.innerText = timeToStr(d) + '/' + timeToStr(d);
				ps.style.webkitTransition = 'all 0.3s linear';
				ps.style.width = L + 'px';
				stopPlay();*/
			}, function(e) {
				outLine('播放音频文件"' + url + '"失败：' + e.message);
			});
			// 获取总时长
			/*var d = p.getDuration();
			if(!d) {
				pt.innerText = '00:00:00/' + timeToStr(d);
			}*/
			/*pi = setInterval(function() {
				if(!d) { // 兼容无法及时获取总时长的情况
					d = p.getDuration();
				}
				var c = p.getPosition();
				if(!c) { // 兼容无法及时获取当前播放位置的情况
					return;
				}
				pt.innerText = timeToStr(c) + '/' + timeToStr(d);
				var pct = Math.round(L * c / d);
				if(pct < 8) {
					pct = 8;
				}
				ps.style.width = pct + 'px';
			}, 1000);*/
		}
 
		// 停止播放
		function stopPlay() {
			clearInterval(pi);
			pi = null;
			setTimeout(resetPlay, 500);
			// 操作播放对象
			if(p) {
				p.stop();
				p = null;
			}
		}
 
		// 重置播放页面内容
		function resetPlay() {
			ep.style.display = 'none';
			ps.style.width = '8px';
			ps.style.webkitTransition = 'all 1s linear';
			pt.innerText = '00:00:00/00:00:00';
		}
 
		// 拍照
		function getImage() {
			outLine('开始拍照：');
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(p) {
				outLine('拍照成功：' + p);
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					//createItem(entry);
					uploadPhoto(p, entry);
				}, function(e) {
					outLine('读取拍照文件错误：' + e.message);
				});
			}, function(e) {
				outLine('失败：' + e.message);
			}, {
				filename: '_doc/camera/',
				index: 1
			});
		}
		// 录像
		function getVideo() {
			outLine('开始录像：');
			var cmr = plus.camera.getCamera();
			console.log("支持录制的视频格式：cmr.supportedVideoFormats====="+ cmr.supportedVideoFormats)
			cmr.startVideoCapture(function(p) {
				outLine('录像成功：' + p);
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					//createItem(entry);
					uploadVideo(p, entry);
				}, function(e) {
					outLine('读取录像文件错误：' + e.message);
				});
			}, function(e) {
				outLine('失败：' + e.message);
			}, {
				filename: '_doc/camera/',
				index: 1
			});
		}
 
		//上传图片
		function uploadImage() {
			console.log("开始上传图片");
			//var file = e.currentTarget.files[0];
			var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";
			var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";
			var pic = $('#uploadImage')[0].files[0];
			var fd = new FormData();
			//fd.append('uploadFile', pic);
			fd.append('file', pic);
			$.ajax({
				url: uploadUrl,
				type: "post",
				// Form数据
				data: fd,
				cache: false,
				contentType: false,
				processData: false,
				success: function(data) {
					console.log("the data is : {}", data);
					if(data.code == 0) {
						console.log("上传成功后的文件路径为：" + data.data);
						var img = $("<img />");
						img.attr("src", downUrl + "?imageName=" + data.data);
						img.width("160px");
						img.height("160px");
						$("#div_image").append(img);
					}
 
				}
			});
 
		}
		//上传拍照
		function uploadPhoto(path, entry) {
			console.log("开始上传拍照：");
			var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";
			var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";
			var task = plus.uploader.createUpload(uploadUrl, {
					method: "POST"
				},
				function(t, status) { //上传完成
					if(status == 200) {
						var data = JSON.parse(t.responseText);
						console.log("上传成功,返回文件名为 ：" + data.data);
						outLine("文件上传成功：" + t.responseText);
 
						//上传下载成功之后要清除本地的图片文件
						var img = $("<img />");
						img.attr("src", downUrl + "?imageName=" + data.data);
						img.width("160px");
						img.height("160px");
						$("#div_image").append(img);
						cleanHistory();
 
					} else {
						outLine("上传失败：" + status);
						//wt.close();
					}
				}
			);
			task.addData("client", "HelloH5+");
			task.addData("uid", getUid());
			task.addFile(path, {
				key: "file"
			})
			task.start();
		}
 
        //上传录像
		function uploadVideo(path, entry) {
			console.log("开始上传录像：path="+path);
			var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";
			var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";
			var task = plus.uploader.createUpload(uploadUrl, {
					method: "POST"
				},
				function(t, status) { //上传完成
					if(status == 200) {
						var data = JSON.parse(t.responseText);
						console.log("上传成功,返回文件名为 ：" + data.data);
						outLine("文件上传成功：" + t.responseText);
 
						//上传下载成功之后要清除本地的图片文件
						var v = $("<video width='320' width='240' preload='auto' controls='controls'/>");
						v.attr("src", downUrl + "?imageName=" + data.data);
						//v.attr("src", path);
						//v.attr("id", data.data);
						$("#div_video").append(v);
						//cleanHistory();
 
					} else {
						outLine("上传失败：" + status);
						//wt.close();
					}
				}
			);
			task.addData("client", "HelloH5+");
			task.addData("uid", getUid());
			task.addFile(path, {
				key: "file"
			})
			task.start();
		}
 
		function test1() {
			alert(537);
		}
		
		function uploadownTest(){
			
		}
		
		// 用户名登录
        $('#login').click(function(){
        	console.log(4444444);
             //$("#f2").submit();
			
			var param ={'username':'jack','password':'jack'};
            $.ajax({
                type: 'POST',
                url: 'http://xx.xx.xx.xx:xx/login',
				//url: publicUrl+'/login',
                data: param,
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
                success: function(data){
                    console.log(data);
                    if(data.data && data.data.success && data.data.userDetails.username){
                        //window.location.href = "./index.html";
                        outLine(data);
					}
                }
            })
        });
        
        // 用户名登出
	$('#logout').click(function(){
		$.ajax({
			type: 'POST',
			url: publicUrl+'/logout',
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(data){
				if((data.data && data.data) || data.code == 100){
					//window.location.href = "login.html";
					outLine(data);
				}
			}
		})
	});
 
		
		
	</script>
 
</html>